<nz-spin [nzSpinning]="isSpinning">
  <nz-tabset class="no-bottom-line">
    <nz-tab i18n-nzTitle="@@common.login" nzTitle="Login" *ngIf="!isSSO">
      <form nz-form [formGroup]="pwdLoginForm" (ngSubmit)="passwordLogin()">
        <nz-form-item *ngIf="step === LoginStep.Step1">
          <nz-form-control [nzErrorTip]="invalidPhoneNumberOrEmail">
            <nz-input-group [nzPrefix]="emailPrefix">
              <input type="text" nz-input formControlName="identity" i18n-placeholder="@@common.email" placeholder="Email" autofocus/>
            </nz-input-group>
            <ng-template #emailPrefix>
              <i nz-icon nzType="icons:icon-email"></i>
            </ng-template>
            <ng-template #invalidPhoneNumberOrEmail let-control>
              <ng-container *ngIf="control.hasError('required')" i18n="@@common.email-cannot-be-empty">Email is mandatory</ng-container>
              <ng-container *ngIf="control.hasError('invalid')" i18n="@@common.invalid-email">Invalid Email</ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <ng-container *ngIf="step === LoginStep.Step2">
          <nz-form-item *ngIf="displayWorkspaceKey">
            <nz-form-control [nzErrorTip]="invalidWorkspaceKey">
              <nz-input-group [nzPrefix]="workspacePrefix">
                <input type="text" nz-input formControlName="workspaceKey" i18n-placeholder="@@common.workspace-key" placeholder="Workspace key"/>
              </nz-input-group>
              <ng-template #workspacePrefix>
                <i nz-icon nzType="bank"></i>
              </ng-template>
              <ng-template #invalidWorkspaceKey let-control>
                <ng-container *ngIf="control.hasError('required')" i18n="@@common.workspace-key-cannot-be-empty">Workspace key is mandatory</ng-container>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control i18n-nzErrorTip="@@common.password-mandatory" nzErrorTip="password is mandatory">
              <nz-input-group [nzPrefix]="passwordPrefix" [nzSuffix]="suffixTemplate">
                <input
                  i18n-placeholder="@@common.password"
                  formControlName="password"
                  [type]="passwordVisible ? 'text' : 'password'"
                  nz-input
                  placeholder="password"
                />
              </nz-input-group>
              <ng-template #passwordPrefix>
                <i nz-icon nzType="icons:icon-password"></i>
              </ng-template>
              <ng-template #suffixTemplate>
                <i nz-icon [nzType]="passwordVisible ? 'eye' : 'eye-invisible'" (click)="passwordVisible = !passwordVisible"></i>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
        </ng-container>
        <button type="submit" nz-button nzType="primary" class="btn submit-btn" [nzLoading]="isLoading">
          <ng-container *ngIf="step !== LoginStep.Step2" i18n="@@common.continue">Continue</ng-container>
          <ng-container *ngIf="step === LoginStep.Step2" i18n="@@common.login">Login</ng-container>
        </button>
      </form>
      <div class="social-login" *ngIf="isSocialEnabled">
        <nz-divider i18n-nzText="@@common.social-login-hint" nzText="Sign In / Sign Up with"></nz-divider>
        <div class="social-btns">
          <button *ngFor="let provider of oauthProviders" nz-button nzType="default" class="btn social-btn" (click)="socialLogin(provider)">
            <span nz-icon [nzType]="provider.icon" nzTheme="outline"></span>
            <span i18n="@@common.continue-with-google" *ngIf="provider.name === OAuthProviderEnum.Google">Continue with Google</span>
            <span i18n="@@common.continue-with-github" *ngIf="provider.name === OAuthProviderEnum.GitHub">Continue with GitHub</span>
          </button>
        </div>
      </div>
    </nz-tab>
    <nz-tab i18n-nzTitle="@@common.sso" nzTitle="SSO" *ngIf="isSsoEnabled">
      <form nz-form [formGroup]="ssoForm" (ngSubmit)="ssoLogin()">
        <nz-form-item>
          <nz-form-control [nzErrorTip]="invalidWorkspaceKey">
            <nz-input-group [nzPrefix]="workspacePrefix">
              <input type="text" nz-input formControlName="workspaceKey" i18n-placeholder="@@common.workspace-key" placeholder="Workspace key"/>
            </nz-input-group>
            <ng-template #workspacePrefix>
              <i nz-icon nzType="bank"></i>
            </ng-template>
            <ng-template #invalidWorkspaceKey let-control>
              <ng-container *ngIf="control.hasError('required')" i18n="@@common.workspace-key-cannot-be-empty">Workspace key is mandatory</ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <button type="submit" nz-button nzType="primary" class="btn submit-btn" [nzLoading]="isLoading" i18n="@@common.continue">Continue</button>
      </form>
    </nz-tab>
  </nz-tabset>
</nz-spin>
